<template>
	<view class="flex-col page">
		<view class="title-bg flex-row-yc">
			<view @click="back" class="item-icon"><u-icon name="arrow-left" color="#fff"></u-icon></view>
			<view class="flex1 text">订单</view>
		</view>

		<view class='top flex-col'>
			<view class="flex-row-yc item">
				<view class="item-icon"><u-icon name="map" color="#76a2d3"></u-icon></view>
				<view>{{usebeginaddress}}</view>
			</view>
			<view class="flex-row-yc item">
				<view class="item-icon"><u-icon name="map" color="#f0b459"></u-icon></view>
				<view>{{useendaddress}}</view>
			</view>
			<view class="flex-row-yc info pd-lr">
				<view>{{usemanname}}</view>
				<view class="flex1">{{usemantel}}</view>
				<view class="item-icon flex-col-c"><u-icon name="phone-fill" size='26px' color="#1890FF"></u-icon>
				</view>
				<view class="location flex-col-c">
					<image src="../../static/images/ic-location.png"></image>
				</view>
			</view>
		</view>
		<view class="flex1">
			<div id="container"></div>
		</view>
		<view class='bottom' @click="beginNavigation()">
			开始导航
		</view>
	</view>
</template>
<script>
	import AMapLoader from "@amap/amap-jsapi-loader";

	export default {
		name: "NavigationAmap",
		data() {
			return {
				cid: '',
				usebeginaddress: '',
				useendaddress: '',
				usemanname: '',
				usemantel: '',
			}
		},
		onLoad(options) {
			this.cid = options.cid;
			this.usebeginaddress = options.usebeginaddress;
			this.useendaddress = options.useendaddress;
			this.usemanname = options.usemanname;
			this.usemantel = options.usemantel;
		},
		mounted() {
			this.initAMap();
		},
		unmounted() {
			this.map?.destroy();
		},
		methods: {
			initAMap() {
				window._AMapSecurityConfig = {
					securityJsCode: "a6df9019e5ebf740790e7778aad73c83",
				};
				AMapLoader.load({
						key: "c6d2ffd3bed27aa1e81f2c3a871aeb3c", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ["AMap.Scale", "AMap.Geolocation",
							"AMap.Driving", "AMap.Marker", "AMap.Navigation"
						], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
					})
					.then((AMap) => {

						let geolocation = new AMap.Geolocation({
							enableHighAccuracy: true, // 是否使用高精度定位，默认:true
							timeout: 10000 // 超过10秒后停止定位，默认：5s
						});

						geolocation.getCurrentPosition((status, result) => {
							if (status == 'complete') {
								console.log("111", result);
								let position = result.position;

								this.map = new AMap.Map("container", {
									// 设置地图容器id
									viewMode: "3D", // 是否为3D地图模式
									zoom: 15, // 初始化地图级别
									center: [position.lng, position.lat], // 初始化地图中心点位置
								});

								// 根据经纬度标记地理位置
								this.setMarker();

								// this.drivingSearch();

							} else {
								console.log("222", result.message);
							}
						});

					})
					.catch((e) => {
						console.log(e, "999");
					});

			},

			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			//定位
			locationPosition() {
				let geolocation = new AMap.Geolocation({
					enableHighAccuracy: true, // 是否使用高精度定位，默认:true
					timeout: 10000 // 超过10秒后停止定位，默认：5s
				});

				geolocation.getCurrentPosition((status, result) => {
					if (status == 'complete') {
						console.log("111", result);
						let position = result.position;
					} else {
						console.log("222", result.message);
					}
				});
			},

			//添加标记
			setMarker(lng, lat) {
				// 根据经纬度标记地理位置
				var marker = new AMap.Marker({
					position: new AMap.LngLat(position.lng, position.lat),
					title: '默认图标' //可以自定义icon图标展示
				})
				// 将创建的点标记添加到已有的地图实例
				this.map.add(marker)
			},

			//路径规划
			drivingSearch(startLng, startLat, endLng, endLat) {
				var driving = new AMap.Driving({
					map: this.map
				});
				driving.search(new AMap.LngLat(118.787326, 32.053766), new AMap.LngLat(
						119.49869, 32.175316),
					(status, result) => {
						if (status === 'complete') {
							console.log('绘制驾车路线完成')
							// console.log(status,'status')

						} else {
							console.log('获取驾车数据失败：' + result, status)
						}
					});
			},

			//启动导航
			beginNavigation() {
				this.map.plugin('AMap.Navigation', function() {
					// 导航启动后的回调处理
					console.log('启动导航')
				});
			}
		},
	};
</script>
<style scoped>
	uni-page-body,
	html,
	body {
		height: 100%;
	}

	.page {
		width: 100%;
		height: 100%;
	}

	.title-bg {
		padding: 0 10px;
		height: 65px;
		background: linear-gradient(-90deg, #3C88D8 0%, #7CAFE7 100%);


		.text {
			color: #FFFFFF;
			font-size: 16px;
			font-weight: 600;
			margin-left: 10px;
		}
	}

	#container {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		background-color: white;

		.item {
			height: 40px;
			border-top: aquamarine 1px solid;
			margin: 0 20px;

			.item-icon {
				margin-right: 10px;
			}
		}

		.info {
			height: 60px;
			border-top: aquamarine 1px solid;

			.item-icon {
				width: 80px;
			}

			.location {
				width: 80px;
				height: 100%;

				image {
					width: 20px;
					height: 20px;
				}

			}
		}
	}

	.bottom {
		/* height: 50px; */
		text-align: center;
		line-height: 50px;
		border-top: aquamarine 1px solid;
	}

	.pd-lr {
		padding: 0 20px;
	}
</style>